<template>
  <div class="home-blog" :class="recoShow?'reco-show': 'reco-hide'">
    <div class="hero" :style="{background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
      <h1>{{ data.heroText || $title || 'helltab' }}</h1>

      <p class="description">{{ data.tagline || $description || '人生, 清欢而已' }}</p>
    </div>

    <div class="home-blog-wrapper">
      <!-- 博客列表 -->
      <note-abstract
          class="blog-list"
          :data="curPagedBlogs"
          :isHome="true"
          :currentPage="1">
        <pagation
            slot="pageSlot"
            class="pagation"
            :data="posts"
            :perPage="page.size"
            :currentPage="page.cur"
            @getCurrentPage="getCurrentPage"></pagation>
      </note-abstract>
      <div class="info-wrapper">
        <img class="personal-img" :src="$withBase($frontmatter.faceImage || $themeConfig.logo)" alt="hero">
        <h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
        <div class="num">
          <div>
            <h3>{{ getPagesLength }}</h3>
            <h6>ARTICLES</h6>
          </div>
          <div>
            <h3>{{ $tags.length }}</h3>
            <h6>LABELS</h6>
          </div>
        </div>
        <hr>
        <h4><i class="iconfont reco-category"></i> CATALOGS
          <router-link :to="topCata.list[0].path" v-show="topCata.more">
           <span style="margin-left: 80px">
            more..
           </span>
          </router-link>
        </h4>
        <ul class="category-wrapper">
          <li class="category-item" v-for="(item, index) in topCata.list" :key="index">
            <router-link :to="item.path">
              <span class="category-name">{{ item.name }}</span>
              <span class="post-num">{{ item.posts.length }}</span>
            </router-link>

          </li>

        </ul>
        <hr>
        <h4><i class="iconfont reco-tag"></i> LABELS</h4>
        <div class="tags">
          <span
              v-for="(item, index) in tags"
              :key="index"
              :style="{ 'backgroundColor': item.color }"
              @click="getPagesByTags(item.name)">{{ item.name }}</span>
        </div>
      </div>
    </div>

    <Content class="home-center" custom/>

    <div class="footer">
      <span>
        <i class="iconfont reco-theme"></i>
        <a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
      </span>
      <span v-if="$themeConfig.record">
        <i class="iconfont reco-beian"></i>
        <a>{{ $themeConfig.record }}</a>
      </span>
      <span>
        <i class="iconfont reco-copyright"></i>
        <a>
          <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
          {{ year }}
          &nbsp;&nbsp;
          <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
        </a>
      </span>
      <span>
        <AccessNumber idVal="/"></AccessNumber>
      </span>
    </div>
  </div>
</template>

<script>
import NavLink from "@theme/components/NavLink";
import AccessNumber from '@theme/components/Valine/AccessNumber'
import NoteAbstract from '@theme/components/NoteAbstract.vue'
import mixin from '@theme/mixins/index.js'
import Pagation from '@theme/components/Pagation'

export default {
  mixins: [mixin],
  components: {NavLink, AccessNumber, NoteAbstract, Pagation},
  data() {
    return {
      recoShow: false,
      tags: [],
      page: {
        cur: 1,
        size: 6,
        count: 5
      }
    }
  },
  computed: {
    // 时间降序后的博客列表
    posts() {
      let posts = this.$site.pages
      posts = posts.filter(item => {
        const {home, isTimeLine, date} = item.frontmatter
        return !(home == true || isTimeLine == true || date === undefined)
      })
      posts.sort((a, b) => {
        return this._getTimeNum(b) - this._getTimeNum(a)
      })
      return posts
    },
    curPagedBlogs() {
      return this.posts.slice((this.page.cur - 1) * this.page.size, (this.page.cur) * this.page.size,)
    },
    topCata() {
      let len = this.$categories.list.length;
      return len > 5 ? {
        more: true,
        list: this.$categories.list
            .sort((a, b) => b.posts.length - a.posts.length)
            .slice(0, 5)
      } : {
        more: false,
        list: this.$categories.list
      }
    },
    // 分类信息
    getPagesLength() {
      let num = 0
      this.$categories.list.map(v => {
        num += v.posts.length
      })
      return num
    },
    year() {
      return new Date().getFullYear()
    },
    data() {
      return this.$frontmatter;
    },

    actionLink() {
      return {
        link: this.data.actionLink,
        text: this.data.actionText
      };
    },

    heroImageStyle() {
      return this.data.heroImageStyle || {
        maxHeight: '200px',
        margin: '6rem auto 1.5rem'
      }
    },

    bgImageStyle() {
      const bgImageStyle = {
        height: '350px',
        textAlign: 'center',
        overflow: 'hidden'
      }
      return this.data.bgImageStyle ? {...bgImageStyle, ...this.data.bgImageStyle} : bgImageStyle
    }
  },
  created() {
    if (this.$tags.list.length > 0) {
      let tags = this.$tags.list
      tags.map(item => {
        const color = this._tagColor()
        item.color = color
        return tags
      })
      this.tags = tags
    }
  },
  mounted() {
    this.recoShow = true
  },
  methods: {
    getCurrentPage(page) {
      this.page.cur = page
      this.$page.currentPage = page
    },
    // 根据分类获取页面数据
    getPages() {
      let pages = this.$site.pages
      pages = pages.filter(item => {
        const {home, isTimeLine, date} = item.frontmatter
        return !(home == true || isTimeLine == true || date === undefined)
      })
      // reverse()是为了按时间最近排序排序
      this.pages = pages.length == 0 ? [] : pages
    },
    getPagesByTags(currentTag) {
      const base = this.$site.base
      window.location.href = `${base}tag/?tag=${currentTag}`
    },
    // 获取时间的数字类型
    _getTimeNum(data) {
      return parseInt(new Date(data.frontmatter.date).getTime())
    },
  }
};
</script>

<style lang="stylus">
@require '../styles/loadMixin.styl'

.home-blog {
  padding: $navbarHeight 0 0;
  margin: 0px auto;

  .hero {
    figure {
      position absolute
      background yellow
    }

    h1 {
      margin: 7rem auto 1.8rem;
      font-size: 2.5rem;
      color #fff;
    }

    h1, .description, .action, .huawei {
      color #fff !important
    }

    .description {
      margin: 1.8rem auto;
      font-size: 1.6rem;
      line-height: 1.3;
      color: lighten($textColor, 20%);
    }
  }

  .home-blog-wrapper {
    display flex
    align-items: flex-start;
    margin 20px auto 0
    max-width 1126px

    .info-wrapper {
      transition all .3s
      margin-left 15px;
      width 380px;
      height auto;
      box-shadow 0 2px 10px rgba(0, 0, 0, 0.2);
      box-sizing border-box
      padding 0 15px

      &:hover {
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
      }

      .personal-img {
        display block
        margin 2rem auto
        width 8rem
        height 8rem
      }

      .name {
        text-align center
      }

      .num {
        display flex
        margin 0 auto 1rem
        width 80%

        > div {
          text-align center
          flex auto

          &:first-child {
            border-right 1px solid #333
          }

          h3 {
            line-height auto
            margin 0 0 .6rem
            color $textColor
          }

          h6 {
            line-height auto
            margin 0
          }
        }
      }

      .category-wrapper {
        list-style none
        padding-left 0

        .category-item {
          padding: .4rem .8rem;
          border: 1px solid #999;
          transition: all .5s

          &:first-child {
            border-top-right-radius: .25rem;
            border-top-left-radius: .25rem;
          }

          &:not(:first-child) {
            border-top: none;
          }

          &:hover {
            background #d3d3d3
          }

          a {
            display flex
            justify-content: space-between

            .post-num {
              width 1.6rem;
              height 1.6rem
              text-align center
              line-height 1.6rem
              border-radius 50%
              background #eee
              font-size .6rem
              color $textColor
            }
          }
        }
      }

      .tags {
        margin-bottom 30px

        span {
          vertical-align: middle;
          margin: 4px 4px 10px;
          padding: 4px 8px;
          display: inline-flex;
          cursor: pointer;
          border-radius: 2px;
          background: #fff;
          color: #fff;
          font-size: 13px;
          box-shadow 0 1px 4px 0 rgba(0, 0, 0, 0.2)
          transition: all .5s

          &:hover {
            transform scale(1.04)
          }

          &.active {
            transform scale(1.2)
          }
        }
      }
    }
  }

  .footer {
    padding: 2.5rem;
    border-top: 1px solid $borderColor;
    text-align: center;
    color: lighten($textColor, 25%);

    > span {
      margin-left 1rem

      > i {
        margin-right .5rem
      }
    }
  }
}

.reco-hide {
  .hero {
    img {
      load-start()
    }

    h1 {
      load-start()
      color red
    }

    .description {
      load-start()
    }

    .huawei {
      load-start()
    }

    .action-button {
      load-start()
    }
  }

  .home-blog-wrapper {
    load-start()
  }

  .home-center {
    load-start()
    padding 0
  }

  .footer {
    load-start()
  }
}

.reco-show {
  .hero {
    img {
      load-end(0.08s)
    }

    h1 {
      load-end(0.16s)
    }

    .description {
      load-end(0.24s)
    }

    .huawei {
      load-end(0.32s)
    }

    .action-button {
      load-end(0.4s)
    }
  }

  .home-blog-wrapper {
    load-end(0.48s)
  }

  .home-center {
    load-end(0.56s)
  }

  .footer {
    load-end(0.64s)
  }
}

@media (max-width: $MQMobile) {
  .home-blog {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .hero {
      margin 0 -1.5rem
      height 350px

      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 6rem auto 1.8rem;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      .info-wrapper {
        display none !important
      }
    }
  }

  .footer {
    text-align: left !important;

    > span {
      display block
      margin-left 0
      line-height 2rem
    }
  }
}

@media (max-width: $MQMobileNarrow) {
  .home-blog {
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .hero {
      margin 0 -1.5rem
      height 350px

      img {
        max-height: 210px;
        margin: 2rem auto 1.2rem;
      }

      h1 {
        margin: 6rem auto 1.8rem;
        font-size: 2rem;
      }

      h1, .description, .action {
        // margin: 1.2rem auto;
      }

      .description {
        font-size: 1.2rem;
      }

      .action-button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
      }
    }

    .home-blog-wrapper {
      .info-wrapper {
        display none !important
      }
    }

    .pagation {
      display: block
    }
  }
}
</style>
